import { Router } from "next/router";
import React, { useState } from "react";
import { useRouter } from 'next/router';
import withTranslate from "@/hocs/withTranslate";

const TableWithPagination = ({t, columns, data, actions, pageSize = 5 }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const router = useRouter();
  
  // 计算总页数
  const totalPages = Math.ceil(data.length / pageSize);

  // 获取当前页的数据
  const paginatedData = data.slice((currentPage - 1) * pageSize, currentPage * pageSize);

  return (
    <div className="overflow-x-auto mx-auto">
      <table className="table w-full">
        {/* 表头 */}
        <thead>
          <tr>
            {columns.map((col, index) => (
              <th key={index} className={`text-left text-lg font-bold ${
                col.type === "image" ? "w-32" : 
                col.type === "date" ? "w-48" : 
                "w-full"
              }`}>{col.label}</th>
            ))}
            {actions && <th className="text-center w-48">操作</th>}
          </tr>
        </thead>

        {/* 表格内容 */}
        <tbody>
          {paginatedData.map((row, rowIndex) => (
            <tr 
              key={rowIndex} 
              className="border-b hover:bg-blue-50 cursor-pointer" 
              onClick={() => !actions && router.push(`/news-detail?id=${row["_id"]}`)}
            >
              {columns.map((col, colIndex) => (
                <td key={colIndex} className={
                  col.type === "image" ? "w-32" : 
                  col.type === "date" ? "w-48" : 
                  "w-full"
                }>
                  {/* 图片类型字段 */}
                  {col.type === "image" ? (
                    <img src={'http://'+window.location.hostname+':8089/'+row[col.key]} alt={row.name} className="w-16 h-16 rounded-lg object-cover" />
                  ) : col.type === "date" ? (
                    new Date(row[col.key]).toLocaleDateString()
                  ) : col.type === "text" ? (
                    <div className="max-w-xl">
                      <div className="marquee-container">
                        <div className="marquee-content">
                          {row[col.key]}
                        </div>
                      </div>
                    </div>
                  ) : (
                    row[col.key]
                  )}
                </td>
              ))}
              {actions && (
                <td className="flex gap-2 justify-center items-center">
                  {actions.map((action, actionIndex) => (
                    <button
                      key={actionIndex}
                      className={`btn btn-xs ${action.className}`}
                      onClick={() => action.onClick(row)}
                    >
                      {action.label}
                    </button>
                  ))}
                </td>
              )}
            </tr>
          ))}
        </tbody>
      </table>

      {/* 分页 */}
      <div className="flex justify-center items-center mt-4 space-x-2">
        <button 
          className="btn btn-sm" 
          disabled={currentPage === 1} 
          onClick={() => setCurrentPage(currentPage - 1)}
        >
          « {t('table.previous')}
        </button>
        <span className="px-4">{t('table.number')} {currentPage} {t('table.page')} / {t('table.total')} {totalPages} {t('table.page')}</span>
        <button 
          className="btn btn-sm" 
          disabled={currentPage === totalPages} 
          onClick={() => setCurrentPage(currentPage + 1)}
        >
          {t('table.next')} »
        </button>
      </div>
    </div>
  );
};

export default withTranslate(TableWithPagination);
